// 先引入布局组件
import { Col, Layout, Menu, Row } from 'antd';
import { HomeOutlined } from '@ant-design/icons';

import RouterView from '../../router';

const { Header, Sider, Content } = Layout;

const role_name = '管理员';

const acls = ['1'];

export default (props) => {
    // 从 props 中，拿到 routes 路由表数组
    const { routes } = props;

    const authMenus = routes.filter(
        (item) => !item.aclId || acls.includes(item.aclId)
    );

    console.log('routes', routes);

    return (
        <Layout>
            <Header style={{ background: '#fff' }}>
                <Row justify="space-between">
                    <Col>会议室预定系统</Col>
                    <Col>
                        <i className="iconfont icon-wode"></i>
                        <span>aaaa</span>
                        <span>管理员</span>
                    </Col>
                </Row>
            </Header>

            <Layout>
                <Sider theme="light">
                    <Menu>
                        {authMenus.map((item, index) => (
                            <Menu.Item key={index} icon={<HomeOutlined />}>
                                {item.name}
                                {item.isDynamic ? `(${role_name})` : ''}
                            </Menu.Item>
                        ))}
                    </Menu>
                </Sider>
                <Content>{/* <RouterView routes={} /> */}</Content>
            </Layout>
        </Layout>
    );
};
